<template>
  <el-row>
    <el-col :span="8" class="el-col">
      <label>{{prefixDesc}}：</label>
    </el-col>
    <el-col :span="16">
      <el-select
        v-model="itemValue"
        placeholder="请选择"
        size="small"
        @change="handleSelect"
        @clear="handleSelect('')"
        clearable
      >
        <el-option v-for="item in dataList" :key="item.value" :label="item.value" :value="item.id"></el-option>
      </el-select>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: 'MySelect',
  props: {
    prefixDesc: {
      type: String,
      required: true
    },
    value: {
      type: [String, Number],
      required: false,
      default: ''
    },
    dataSource: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dataList: this.dataSource,
      itemValue: ''
    }
  },
  watch: {
    value(newValue) {
      this.itemValue = newValue
    }
  },
  methods: {
    handleSelect(id) {
      if (id === '') {
        this.itemValue = ''
      }
      this.$emit('input', id)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-row {
  line-height: 32px;
  .el-col {
    text-align: right;
  }
  .el-select {
    width: 100%;
  }
}
</style>
